/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/BreadCrumb/item.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

export type BreadCrumbItemProps = {
  selected: boolean;
  text: string;
  value: string;
  isFirst: boolean;
}

export interface BreadCrumbItemSetupState {
  
}

export enum BreadCrumbItemEmitEventNameEnum {
  Input = 'input',
  Click = 'click'
}

export type BreadCrumbItemInstance = ComponentInstance & BreadCrumbItemSetupState
export type BreadCrumbItemVM = ComponentRenderProxy<BreadCrumbItemProps> & CommonComponentInstance & BreadCrumbItemInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserBreadCrumbItem,
  emits: [
    BreadCrumbItemEmitEventNameEnum.Input,
    BreadCrumbItemEmitEventNameEnum.Click
  ],
  props: {
    selected: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    text: {
      type: String as PropType<string>,
      default: ''
    },
    value: {
      type: String as PropType<string>,
      default: ''
    },
    isFirst: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup(props: BreadCrumbItemProps, { emit }) {
    
    const onClickHandler = () => {
      emit(BreadCrumbItemEmitEventNameEnum.Click)
    }
    
    return {
      onClickHandler
    }
    
  },
  render(h: CreateElement) {
    return (
      <div 
        class={BaseSelectUserComponentNameEnum.BaseSelectUserBreadCrumbItem}
        onClick={this.onClickHandler}
      >
        
        {this.isFirst && (
          <i class="base-select-user-bread-crumb-item-icon iconfont icon-arrow-left"></i>
        )}
        
        <span>
          { this.text }
        </span>
        
      </div>
    )
  }
})
